<template>
    <el-main>
        <el-header>
            <mu-flex class="flex-wrapper" justify-content="end">
                <mu-flex justify-content="start">
                    <mu-button color="#f44336" style="margin-left: 16px" @click="toggleHotBook()">
                        热门
                    </mu-button>
                </mu-flex>
                <mu-flex justify-content="end">
                    <mu-button color="primary" style="margin-left: 16px" @click="toggleNav()">目录</mu-button>
                </mu-flex>
            </mu-flex>
            <mu-drawer :open.sync="directory" :docked="docked" :right="position1 === 'right'">
                <el-table :data="toc" :border="false" :show-header="false" :highlight-current-row="true">
                    <el-table-column label="章节">
                        <template slot-scope="scope">
                            <el-button class="normal" type="text" size="medium"
                                       @click="gotoDirectory(scope.row)">
                                {{ scope.row.label }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>


            </mu-drawer>
            <mu-drawer :open.sync="hot" :docked="docked" :left="position2 === 'left'">
                <el-table :data="hotBooksList" :show-header="true" height="660" :border="false" style="width: 100%">
                    <el-table-column
                            label="热门书籍"
                            width="200">
                        <template slot-scope="scope">
                            <!--<div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.bookName }}</el-tag>
                            </div>-->
                            <el-button :class="scope.row.readAmount >=5000 ? 'hot' :'normal'" type="text" size="small"
                                       @click="switchBook(scope.row)">
                                {{ scope.row.bookName }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </mu-drawer>
        </el-header>
        <el-row :gutter="20" data-mu-loading-color="secondary"
                data-mu-loading-overlay-color="rgba(0, 0, 0, .6)" v-loading="loading">
            <el-col :span="24">
                <div class="content">
                    <section class="examples">
                        <div class="carousel">
                            <div class="previews">
                                <!--阅读器视窗-->
                                <div id="read" ref="readArea" class="readWindow"></div>
                            </div>
                            <div class="controls">
                                <div class="next" id="next" @click="goToNextPage()">›</div>
                                <div class="prev" id="prev" @click="goToPrePage()">‹</div>
                            </div>
                        </div>
                    </section>
                </div>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import Epub from 'epubjs';
    import MuListItem from "muse-ui/es5/List/ListItem";


    export default {
        name: "ebookReader",
        components: {
            MuListItem
        },
        data() {
            return {
                docked: false,
                directory: false,
                hot: false,
                hotBooksList: [],
                position1: 'right',
                position2: 'left',
                loading: false,
                toc: []
            }
        },
        props: ['bookProps'],
        methods: {
            //解析和渲染电子书
            //const DOWNLOAD_URL = '/file/data/epubBooks/GrandPlan.epub'
            showEpub(DOWNLOAD_URL) {
                //show  Loading
                this.showLoading();
                const book = new Epub(DOWNLOAD_URL, {
                    restore: true,
                    styles: {},
                });
                //生成 Rendition，挂载电子书所在视窗
                this.rendition = book.renderTo('read', {
                    manager: "continuous",
                    width: 900,
                    height: 1000,
                    themes: {
                        front: '华文行楷'
                    },
                    flow: "auto",//scrolled-doc
                    fixedLayout: false,
                    override: 'websqldatabase',
                    spreads: true//显示两页
                });
                //渲染电子书阅读界面
                this.rendition.display();
                this.book = book;
                book.ready.then((bookTemp) => {
                    //hide Loading
                    //获取目录
                    this.hideLoading();
                    bookTemp = book.navigation;
                    console.log("获取书籍目录信息");
                    this.toc = bookTemp.toc;
                });

            },
            //跳转到上一页
            goToPrePage() {
                this.rendition.prev()
            },
            //跳转到下一页
            goToNextPage() {
                this.rendition.next()
            },
            //前往目录界面
            gotoDirectory(bookItem) {
                this.directory = false;
                this.book.rendition.display(bookItem.href);
            },
            //开关目录抽屉
            toggleNav() {
                this.directory = !this.directory;
            },
            //打开热门书籍列表
            toggleHotBook() {
                this.hot = !this.hot;
                this.getHotBookList();

            },
            //展示loading
            showLoading() {
                this.loading = true;
            },
            //隐藏loading
            hideLoading() {
                this.loading = false;
            },
            switchBook(row) {
                //销毁
                this.book.destroy();
                this.toggleHotBook();
                //生成
                this.showEpub("/file/data/epubBooks/" + row.epubUrl + ".epub");
                //申请调用父组件
                this.$emit("refreshComments", row.id);
            },
            //获取热门书籍列表
            getHotBookList() {
                this.$axios.post("/api/book/hotBookList", this.$qs.stringify({
                    time: new Date()
                })).then(res => {
                    console.log(res);
                    let data = res.data;
                    let length = res.data.length;
                    if (data && data.code === 200) {
                        console.log("data get it！！");
                        this.hotBooksList = [];
                        this.hotBooksList.push(...data.data);
                    } else {

                    }
                })
            }
        },
        //挂载相关实例
        mounted() {
            this.showEpub("/file/data/epubBooks/" + this.bookProps.epubUrl + ".epub");
        }
    }
</script>

<style scoped>
    .tocItem {
        cursor: pointer;
        color: #0000ff;
    }

    .readWindow {
        position: relative;
        width: 70%;
    }

    .directoryNav {
        position: relative;
        width: 30%;
        height: 100%;
    }

    .content {
        width: 100%;
        margin: 10px auto;
    }

    .carousel {
        position: relative;
        text-align: center;
    }

    .carousel .previews {
        position: relative;
        width: 100%;
    }

    .carousel .controls .prev, .carousel .controls .next {
        font-size: 40px;
        font-weight: 200;
        line-height: 32px;
        text-decoration: none;
        position: absolute;
        display: block;
        width: 40px;
        height: 40px;
        margin: -20px 0;
        border-radius: 20px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.4);
    }

    .carousel .controls .prev:hover, .carousel .controls .next:hover {
        color: white;
        background: rgba(0, 0, 0, 0.6);
    }

    .carousel .controls .prev {
        cursor: pointer;
        top: 50%;
        left: 20px;
    }

    .carousel .controls .next {
        cursor: pointer;
        top: 50%;
        right: 20px;
    }

    .el-row {
        margin-bottom: 20px;
    }

    el-row:last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-table-column, .hot {
        text-decoration: none;
        color: red;
        font-size: 14px;
        font-family: 微软雅黑, serif;
    }

    .hot:hover {
        color: #ff4949;
        font-size: 15px;
        cursor: pointer;
        font-weight: bold;
    }

    .normal {
        text-decoration: none;
        color: dodgerblue;
        font-size: 14px;
        font-family: 微软雅黑, serif;
        cursor: pointer;
    }
</style>